<template>
  <NavBack title="搜索页" />
  <van-search
    v-model="value"
    placeholder="请输入搜索关键词"
    @search="onSearch"
  />
  <div class="History">
    <p>历史记录</p>
    <van-icon name="delete" @click="deletel" />
  </div>
  <div class="History-one">
    <p v-for="item in listHistory">{{ item }}</p>
  </div>
  <p class="listshow">商品展示</p>
  <ul v-for="item in listdata" :key="item.proid">
    <li @click="godetail(item.proid)">
      <img :src="item.img1" alt="" />
      <div class="rigth">
        <van-text-ellipsis :content="item.proname" />
        <!-- <p>{{ item.proname }}</p> -->
        <!-- <p>详细描述:{{ item.desc }}</p> -->
        <p>价格:{{ item.originprice }}</p>
      </div>
    </li>
  </ul>
</template>

<script>
import NavBack from "../../../components/NavBack.vue";
import { showSuccessToast, showFailToast } from 'vant';
export default {
  components: {
    NavBack,
  },
  data() {
    return {
      value: "",
      listdata: [],
      listHistory: [],
    };
  },
  methods: {
    onSearch() {
      this.$http({
        url: "/pro/search",
        params: {
          count: 1,
          limitNum: 10,
          keyword: this.value,
        },
      }).then((res) => {
        // category
        if (res.data.code == "200") {
          this.listdata = res.data.data;
          // console.log(this.listdata);
          // console.log(res.data.data);
          // this.listdata.forEach(item=>{
          //   console.log(item.category);
          // })

          // this.listHistory.push(this.value);
          this.listHistory.push(this.value);

          // this.listHistory.forEach((item) => {
          //   if (this.listHistory.indexOf(item) === -1) {
          //     return this.listHistory
          //   }
          // });
        }else{
          showFailToast('暂无数据');
        }
      });
    },
    godetail(id) {
      console.log(id);
      this.$router.push("/gooddetail/" + id);
    },
    deletel() {
      this.listHistory = [];
    },
  },
};
</script>

<style scoped>
li {
  display: flex;
  width: 95%;
  margin: 20px auto;
  /* background-color: red; */
  border: 1px solid gray;
  border-radius: 10px;
  align-items: center;
}
li img {
  width: 80px;
  height: 80px;
}
.rigth {
  display: flex;
  flex-direction: column;
  /* background-color: aqua; */
  flex: 1;
  padding-left: 20px;
}
.van-text-ellipsis {
  font-size: 16px;
  font-weight: 700;
  padding: 10px 0;
}
.rigth p:nth-child(2) {
  font-size: 16px;
  font-weight: 700;
  color: red;
  padding: 10px 0;
}
.History {
  display: flex;
  width: 95%;
  min-height: 40px;
  /* background-color: red; */
  margin: 0 auto;
  justify-content: space-between;
  padding-top: 10px;
  align-items: center;
}
.History p {
  font-size: 16px;
  font-weight: 700;
}
.History-one {
  width: 95%;
  margin: 0 auto;
}
.History-one {
  display: flex;
  flex-wrap: wrap;
}
.History-one p {
  background-color: aliceblue;
  margin: 10px 10px;
}
.listshow{
  width: 95%;
  margin: 0 auto;
  font-size: 16px;
  font-weight: 700;
}
</style>